<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Image</title>
<link href="../../skins/default.css" rel="stylesheet" />
<style type="text/css" rel="stylesheet">
body {
	margin: 0;
	font: 12px/1.5 "sans serif", tahoma, verdana, helvetica;
	background-color: #F0F0EE;
	color: #222222;
	overflow: hidden;
}

form {
	margin: 0;
}

label {
	cursor: pointer;
}

#resetBtn {
	margin-left: 10px;
	cursor: pointer;
}

.main {
	padding: 0 10px;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.tab-navi {
	width: 98%;
	border-bottom: 1px solid #A0A0A0;
	padding-left: 5px;
	margin-bottom: 10px;
}

.tab-navi ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.tab-navi li {
	position: relative;
	border: 1px solid #A0A0A0;
	background-color: #E0E0E0;
	margin: 0 2px -1px 0;
	padding: 0 20px;
	float: left;
	line-height: 25px;
	text-align: center;
	color: #555555;
	cursor: pointer;
}

.tab-navi li.selected {
	background-color: #F0F0EE;
	border-bottom: 1px solid #F0F0EE;
	color: #000000;
	cursor: default;
}

.tab-navi li.on {
	background-color: #F0F0EE;
	color: #000000;
}

.table {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
}

.table li {
	padding: 0;
	margin: 0;
	margin-bottom: 10px;
	display: list-item;
}

.table li label {
	font-weight: bold;
}

.upload {
	position: relative;
	overflow: hidden;
}

input.url {
	width: 200px;
}

#imgFile {
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 25px;
	z-index: 811212;
	border: 0 none;
	opacity: 0;
	filter: alpha(opacity = 0);
}
</style>
<script type="text/javascript">
			var KE = parent.KindEditor;
			var id = KE.util.getParam(location.href, 'id');
			var fileManager = null;
			var allowUpload = (typeof KE.g[id].allowUpload == 'undefined') ? true : KE.g[id].allowUpload;
			var allowFileManager = (typeof KE.g[id].allowFileManager == 'undefined') ? false : KE.g[id].allowFileManager;
			var referMethod = (typeof KE.g[id].referMethod == 'undefined') ? '' : KE.g[id].referMethod;
			var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;
			var imageTabDefault = 0;
			var lang = KE.lang.plugins.image;
			KE.event.ready(function() {
				var typeBox = KE.$('type', document);
				var urlBox = KE.$('url', document);
				var localUrlBox = KE.$('localUrl', document);
				var viewServerBox = KE.$('viewServer', document);
				var viewLocalBox = KE.$('viewLocal', document);
				var alignElements = document.getElementsByName('align');
				var fileBox = KE.$('imgFile', document);
				var widthBox = KE.$('imgWidth', document);
				var heightBox = KE.$('imgHeight', document);
				var titleBox = KE.$('imgTitle', document);
				var resetBtn = KE.$('resetBtn', document);
				var tabNavi = KE.$('tabNavi', document);
				var defaultImg = KE.$('defaultImg', document);
				var leftImg = KE.$('leftImg', document);
				var rightImg = KE.$('rightImg', document);
				var liList = tabNavi.getElementsByTagName('li');
				var selectTab = function(num) {
					if (num == 1) resetBtn.style.display = 'none';
					else resetBtn.style.display = '';
					widthBox.value = '';
					heightBox.value = '';
					titleBox.value = '';
					alignElements[0].checked = true;
					for (var i = 0, len = liList.length; i < len; i++) {
						var li = liList[i];
						if (i === num) {
							li.className = 'selected';
							li.onclick = null;
							if (KE.browser.IE) {
								KE.util.focus(id);
								KE.util.select(id);
							}
						} else {
							if (allowUpload) {
								li.className = '';
								li.onmouseover = function() { KE.addClass(this, 'on'); };
								li.onmouseout = function() { KE.removeClass(this, 'on'); };
								li.onclick = (function (i) {
									return function() {
										if (!fileManager) selectTab(i);
									};
								})(i);
							} else {
								li.parentNode.removeChild(li);
							}
						}
						KE.$('tab' + (i + 1), document).style.display = 'none';
					}
					typeBox.value = num + 1;
					KE.$('tab' + (num + 1), document).style.display = '';
				}
				selectTab(imageTabDefault);
				var imgNode = KE.plugin['image'].getSelectedNode(id);
				if (imgNode) {
					var tempDiv = KE.$$('div', KE.g[id].iframeDoc);
					tempDiv.appendChild(imgNode.cloneNode(false));
					var imgHtml = tempDiv.innerHTML;
					var src = imgNode.src;
					if (imgHtml.match(/kesrc="([^"]+)"/i)) src = RegExp.$1;
					urlBox.value = src;
					widthBox.value = imgNode.width;
					heightBox.value = imgNode.height;
					titleBox.value = (typeof imgNode.alt != 'undefined') ? imgNode.alt : imgNode.title;
					for (var i = 0, len = alignElements.length; i < len; i++) {
						if (alignElements[i].value == imgNode.align) {
							alignElements[i].checked = true;
							break;
						}
					}
				}
				if (allowFileManager) {
					KE.event.add(viewServerBox, 'click', function () {
						if (fileManager) return false;
						fileManager = new KE.dialog({
							id : id,
							cmd : 'file_manager',
							file : 'file_manager/file_manager.html',
							width : 500,
							height : 400,
							loadingMode : true,
							title : KE.lang.fileManager,
							noButton : KE.lang.no,
							afterHide : function() {
								fileManager = null;
							}
						});
						fileManager.show();
					});
				} else {
					viewServerBox.style.display = 'none';
					urlBox.style.width = '300px';
				}
				KE.event.add(fileBox, 'change', function() {
					localUrlBox.value = fileBox.value;
				});
				KE.$('uploadForm', document).action = imageUploadJson;
				KE.$('referMethod', document).value = referMethod;
				var alignIds = ['default', 'left', 'right'];
				for (var i = 0, len = alignIds.length; i < len; i++) {
					KE.event.add(KE.$(alignIds[i] + 'Img', document), 'click', (function(i) {
						return function() {
							KE.$(alignIds[i] + 'Chk', document).checked = true;
						};
					})(i));
				}
				KE.event.add(resetBtn, 'click', function() {
					var g = KE.g[id];
					var img = KE.$$('img', g.iframeDoc);
					img.src = urlBox.value;
					img.style.position = 'absolute';
					img.style.visibility = 'hidden';
					img.style.top = '0px';
					img.style.left = '1000px';
					g.iframeDoc.body.appendChild(img);
					widthBox.value = img.width;
					heightBox.value = img.height;
					g.iframeDoc.body.removeChild(img);
				});
				KE.util.pluginLang('image', document);
				resetBtn.alt = resetBtn.title = lang.resetSize;
				defaultImg.alt = defaultImg.title = lang.defaultAlign;
				leftImg.alt = leftImg.title = lang.leftAlign;
				rightImg.alt = rightImg.title = lang.rightAlign;
				viewServerBox.value = lang.viewServer;
				viewLocalBox.value = lang.viewServer;
				KE.util.hideLoadingPage(id);
				if (imageTabDefault == 0) {
					urlBox.focus();
					urlBox.select();
				}
			}, window, document);
		</script>
</head>
<body>
	<div class="main">
		<div id="tabNavi" class="tab-navi">
			<ul class="clearfix">
				<li>
					<span id="lang.remoteImage"></span>
				</li>
				<li>
					<span id="lang.localImage"></span>
				</li>
			</ul>
		</div>
		<iframe name="uploadIframe" id="uploadIframe" style="display: none;"></iframe>
		<input type="hidden" id="type" name="type" value="" />
		<form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data" target="uploadIframe">
			<input type="hidden" id="editorId" name="id" value="" />
			<input type="hidden" id="referMethod" name="referMethod" value="" />
			<input type="hidden" name="imgBorder" value="0" />
			<ul class="table">
				<li style="height: 30px;">
					<div id="tab1" style="display: none;">
						<label for="url" class="ke-inline-block"><span id="lang.remoteUrl"></span></label>&nbsp;
						<input type="text" id="url" name="url" value="http://" maxlength="255" class="ke-inline-block ke-text-input url" />
						<span class="ke-button-common ke-button-outer btn">
							<input type="button" class="ke-button-common ke-button" id="viewServer" value="" />
						</span>
					</div>
					<div id="tab2" style="display: none;">
						<label for="imgFile" class="ke-inline-block"><span id="lang.localUrl"></span></label>&nbsp;
						<span class="ke-inline-block upload">
							<input type="text" id="localUrl" length="255" class="ke-inline-block ke-text-input url" tabindex="-1" readonly="true" />
							<span class="ke-button-common ke-button-outer btn">
								<input type="button" class="ke-button-common ke-button" id="viewLocal" value="" tabindex="-1" />
							</span>
							<input type="file" id="imgFile" name="imgFile" />
						</span>
					</div>
				</li>
				<li>
					<label for="imgWidth" class="ke-inline-block"><span id="lang.size"></span></label>&nbsp;
					<span id="lang.width"></span>
					&nbsp;
					<input type="text" id="imgWidth" name="imgWidth" value="" maxlength="4" class="ke-inline-block ke-text-input"
						style="width: 50px; text-align: right;" />
					<span id="lang.height"></span>
					&nbsp;
					<input type="text" id="imgHeight" name="imgHeight" value="" maxlength="4" class="ke-inline-block ke-text-input"
						style="width: 50px; text-align: right;" />
					<img class="ke-inline-block" src="./images/refresh.gif" width="16" height="16" id="resetBtn" alt="" />
				</li>
				<li>
					<label class="ke-inline-block"><span id="lang.align"></span></label>&nbsp;
					<input class="ke-inline-block" type="radio" id="defaultChk" name="align" value="" checked="checked" />
					<img class="ke-inline-block" id="defaultImg" src="./images/align_top.gif" width="23" height="25" border="0" alt="" />
					<input class="ke-inline-block" type="radio" id="leftChk" name="align" value="left" />
					<img class="ke-inline-block" id="leftImg" src="./images/align_left.gif" width="23" height="25" border="0" alt="" />
					<input class="ke-inline-block" type="radio" id="rightChk" name="align" value="right" />
					<img class="ke-inline-block" id="rightImg" src="./images/align_right.gif" width="23" height="25" border="0" alt="" />
				</li>
				<li>
					<label for="imgTitle" class="ke-inline-block"><span id="lang.imgTitle"></span></label>
					<input type="text" id="imgTitle" name="imgTitle" value="" maxlength="255" class="ke-inline-block ke-text-input" style="width: 95%;" />
				</li>
			</ul>
		</form>
	</div>
</body>
</html>
